<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我曾</title>
    <script src="/jquery-3.4.1.min.js"></script>
</head>
<body>
<img class="song-albumImg" th:src="${song.albumImg}"/>
<h1 class="song-name">
    <label>歌曲名称:</label> <span th:text="${song.name}"> </span>
</h1>
<a href="#" th:data-id="${song.id}" class="player-btn">播放</a>
<audio id="player" style="display:none" src="" controls="controls"></audio>
<h3>
    <label>歌手:</label> <span class="song-singer" th:text="${song.singer}"></span>
</h3>
<h3>
    <label>所属专辑:</label> <span class="song-albumName" th:text="${song.albumName}"></span>
</h3>
<h3>
    <label>评论数:</label> <span class="song-commentCount" th:text="${song.commentCount}"></span>
</h3>
<div th:utext="${song.lyrics}" class="song-lyrics"></div>
<h3>相似歌曲</h3>
<ul>
    <li>
        <!--        <a href="#" class="change-song" data-id="329925">最爱</a>-->
        <!--        <a href="#" class="player-btn" data-id="329925">播放</a>-->
        <a th:if="${song.id=='1346104327'}" href="/songinfo?songId=329925">最爱</a>
        <a th:if="${song.id=='329925'}" href="/songinfo?songId=1346104327">多想在平庸的生活里拥抱你</a>
    </li>
</ul>
<h1>评论</h1>
<form action="/comment/post" method="post">
    <input type="hidden" name="nickName" value="yunfei"/>
    <input type="hidden" name="songId" value="1346104327"/>
    <input name="content" type="text" style="width: 80%; height:  100px" placeholder="填写你的评论"/>
    <br/>
    <button type="submit" id="comment-button">评论</button>

</form>
<h3>精彩评论</h3>
<div id="comment-section">
    <ul th:each="comment:${comments}">
        <li>
            <img th:src="${comment.icon}"/>
            <span th:text="${comment.nickName}"></span>
            <span th:text="${comment.content}"></span>
        </li>
        <li>
            <label>
                评论时间
            </label>
            <span th:text="${#dates.format(comment.commentTime,'yyyy-MM-dd HH:mm:ss')}"></span>
            <label>点赞数</label>
            <a href="#" th:data-id="${comment.id}" class="like-btn">
                <span th:text="${comment.likeNum}"></span>
            </a>

        </li>
    </ul>
</div>
<script>
    $(function () {

        $('.player-btn').on('click', function (e) {
            e.preventDefault();
            var songId = $(this).data("id");
            $.ajax({
                url: "/song/music",
                method: "GET",
                data: {
                    songId: songId
                },
                cache: false
            })
                .done(function (data) {
                    $('#player').show();
                    $('#player').attr("src", data);
                    document.getElementById("player").play();
                });
        });

        $("#comment-button").click(function() {
            var data = {type: 1};
            $.ajax({
                type: "get",
                async: false,  //同步请求
                url: "/comment/post",
                data: 1346104327,
                // timeout: 1000,
                success: function (e) {
                    //alert(dates);
                    $("#comment-section").html(e);//要刷新的div
                },
                error: function () {
                    // alert("失败，请稍后再试！");
                }
            });
        });
        // // 动态切换歌曲
        // $(".change-song").on('click',function(e) {
        //     e.preventDefault();
        //     var songId=$(this).data("id");
        //     $.ajax({
        //         url: "/songinfo/get",
        //         method: "GET",
        //         data: {
        //             songId: songId
        //         },
        //         cache: false
        //     })
        //         .done(function (data) {
        //             $('.song-albumImg').attr('src', data.albumImg);
        //             $('.song-albumName').html(data.albumName);
        //             $('.song-commentCount').html(data.commentCount);
        //             $('.song-lyrics').html(data.lyrics);
        //             $('.song-name').html(data.name);
        //             $('.song-singer').html(data.singer);
        //         });
        //
        // });

    });
</script>
<script>
    $(function () {
        $(".like-btn").on('click', function (e) {
            e.preventDefault();
            var self = $(this);
            var commentId = self.data('id');
            $.ajax({
                url: "/comment/like",
                method: "post",
                data: {
                    songId: "1346104327",
                    commentId: commentId
                },
                cache: false
            })
                .done(function (data) {
                    self.html(data.likeNum);
                });
        });
    });
</script>
</body>
</html>